<template>
	<view class="back-view" @touchmove.stop.prevent="moveHandle">
		<view class="view-background"></view>
		<view class="white-view-back">
			<view class="top-back">
				<view class="top-name">调整分类</view>
				<view class="close-back" @click="closeBtnAction">
					<image class="close-img" src="../../../../static/close.png"></image>
				</view>
			</view>

			<view class="top-line"></view>
			<view style="width: 100%;">
				<uni-forms ref="baseForm" :modelValue="baseFormData">
					<uni-forms-item label="上级分类：" labelWidth="100" labelAlign="right" required>
						<uniselect v-model="baseFormData.father" :localdata="classRange" @change="classChange"
							:clear="false">
						</uniselect>
					</uni-forms-item>
					<uni-forms-item label="分类名称：" labelWidth="100" labelAlign="right" required>
						<uniselect v-model="baseFormData.child" :localdata="childRange" @change="childChange"
							:clear="false">
						</uniselect>
					</uni-forms-item>

				</uni-forms>
			</view>
			<view class="bottom-back">
				<view class="bottom-btn bottom-btn-cancel" @click="closeBtnAction">取消</view>
				<view class="bottom-btn" @click="saveAction">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniselect from "@/packageB/PC/components/uni-data-select/uni-data-select.vue"

	export default {
		components: {
			uniselect
		},
		props: {
			selectIdArr: {
				type: Array,
				default: [],
			},
			classIndex: {
				type: Number,
				default: 0,
			},
			childIndex: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				showMask: false,

				baseFormData: {
					'child': '',
					'father': '',
				},

				classArr: [], //以及分类
				classRange: [],
				childArr: [], //二级分类
				childRange: [],
				selectClass: 0,
				selectChild: 0

			}
		},

		mounted() {
			console.log(this.classIndex, this.childIndex,this.selectIdArr)
			this.selectClass = this.classIndex;
			this.selectChild = this.childIndex - 1;

			this.requestRoleData()
		},
		methods: {
			//分类网络请求
			async requestRoleData() {
				let _this = this
				let parmas = {
					'pid': ''
				}

				console.log(parmas)
				const res = await this.$myRequest({
					url: "/admin/template/classify",
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.classArr = res.data.data.list;
					_this.classRange = [];
					for (var i = 0; i < _this.classArr.length; i++) {
						var item = {
							value: _this.classArr[i].id,
							text: _this.classArr[i].name,
						}
						_this.classRange.push(item)
					}
					if (_this.classRange.length) {
						_this.$set(_this.baseFormData, 'father', _this.classRange[_this.selectClass].value)

						_this.requestRoleChildData(_this.classRange[_this.selectClass].value)
					}
				}
			},

			//二级分类网络请求
			async requestRoleChildData(pid) {
				let _this = this;
				let parmas = {
					'pid': pid
				}
				console.log(parmas);
				const res = await this.$myRequest({
					url: "/comm/classify/list",
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {

					_this.childArr = res.data.data.list;
					_this.childRange = [];
					for (var i = 0; i < _this.childArr.length; i++) {
						var item = {
							value: _this.childArr[i].id,
							text: _this.childArr[i].name,
						}
						_this.childRange.push(item)
					}
					if (_this.childRange.length >= _this.selectChild) {
						_this.$set(_this.baseFormData, 'child', _this.childRange[_this.selectChild].value)
					}
				}
			},

			//一级分类
			classChange(e) {
				console.log(e)
				this.selectChild = 0;
				this.requestRoleChildData(e)
			},
			
			async saveAction(){
				var _this = this;
				var str = '';
				for(var i = 0; i < this.selectIdArr.length;i++){
					if(i == 0){
						str = this.selectIdArr[i];
					}else{
						str += ',' + this.selectIdArr[i];
					}
				}
			var parms = {
				'ids': str,
			}
			console.log(parms)
			var url = "/admin/template/classify/" + this.baseFormData.child;
			const res = await this.$myRequest({
				url: url,
				method: 'PUT',
				data: parms,
				header: {
					"Content-Type": "application/x-www-form-urlencoded",
					"Authorization": "Basic ZG90Z286ZG90Z28=",
					"token": uni.getStorageSync("accessToken") ? uni.getStorageSync("accessToken") :
						''
				},
			})
			console.log('返回结果', res)
			
			if (res.data.code == 200) {
				uni.showToast({
					title: '修改成功'
				})
				_this.$emit("successBack");
				_this.closeBtnAction()
			}	
			},
			childChange(e) {

			},
			closeBtnAction() {
				this.$emit('tempAdjustClose')
			},
			moveHandle() {
				return true
			},
		},
	}
</script>

<style>
	.back-view {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 199;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.view-background {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.white-view-back {
		width: 452px;
		height: 400px;
		padding: 24px;
		max-height: 400px;
		background-color: white;
		margin-top: -50px;
		border-radius: 4px;
		z-index: 101;
		position: absolute;
	}

	.top-back {
		display: flex;
		justify-content: space-between;
	}

	.top-name {
		font-size: 18px;
		font-weight: normal;
		color: #333333;

	}

	.close-back {
		cursor: pointer;
		width: 20px;
		height: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.close-img {
		width: 12px;
		height: 12px;
	}

	.top-line {
		height: 1px;
		background: #EEEEEE;
		width: 100%;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.bottom-back {

		bottom: 0px;
		width: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: absolute;
		height: 60px;
		right: 16px;
	}

	.bottom-btn {
		cursor: pointer;
		width: 104px;
		height: 32px;
		background: #2DA9C5;
		border-radius: 2px;
		color: #FFFFFF;
		font-size: 14px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bottom-btn-cancel {
		cursor: pointer;
		margin-right: 10px;
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		color: #333333;
	}

	.item-back {
		width: 350px
	}

	.customer-item {
		display: flex;
		margin-top: 8px;
		align-items: center;

	}

	.customer-back {
		min-width: 168px;
		height: 44px;
		background: #E8F7FB;
		border-radius: 4px;
		display: flex;
		align-items: center;
		margin-right: 10px;
	}

	.customer-img {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		margin-left: 8px;
	}

	.customer-name {
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		margin-left: 2px;
	}

	.customer-phone {
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		margin-left: 4px;
	}

	.customer-close {
		width: 16px;
		height: 16px;
		margin-right: 2px;
		margin-left: auto;
	}

	.customer-item-back {
		display: flex;
		flex-wrap: wrap;

	}

	.selectLaw {
		font-size: 14px;
		border: 1px solid #DCDFE6;
		border-radius: 4px;
		padding: 6px 10px;
		position: relative;

		flex-direction: row;
		align-items: center;
		z-index: 100000;
		background-color: white;
	}

	.law-item-back {
		background-color: white;
	}

	.selectLaw-list {
		margin-top: 2px;
		position: absolute;
		width: 340px;
		height: 180px;
		z-index: 100010;
		background-color: white;
		box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2000);
		border-radius: 2px;
	}

	.mask-view {
		position: absolute;
		width: 100vw;
		height: 100vh;
		z-index: 9999;
		background-color: rgba(0, 0, 0, 0.0);
		top: -100px;
		left: 0;
		right: 0;
		bottom: 0;

	}



	.pop-content-back {
		margin-top: 10px;
		height: 160px;
		margin-left: 20px;
		width: 300px;
	}

	.pop-content-list {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		margin-top: 10px;
	}
</style>
